<template>
  <div class="explorer-panel">
    <!-- 标题栏 -->
    <div class="panel-header">
      <div class="header-left">
        <el-icon class="header-icon"><Menu /></el-icon>
        <span class="header-title">Explorer</span>
      </div>
      <el-icon class="header-close" @click="$emit('close')"><Close /></el-icon>
    </div>
    
    <!-- 选项卡 -->
    <div class="panel-tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.key"
        class="tab-item"
        :class="{ active: activeTab === tab.key }"
        @click="setActiveTab(tab.key)"
      >
        {{ tab.label }}
      </div>
    </div>
    
    <!-- 树形视图 -->
    <div class="tree-container">
      <el-scrollbar class="tree-scrollbar">
        <el-tree
          ref="treeRef"
          :data="displayData"
          :props="treeProps"
          :show-checkbox="true"
          :default-expand-all="false"
          node-key="expressID"
          @check="handleCheck"
          @node-click="handleNodeClick"
        >
        <template #default="{ node, data }">
          <div class="tree-node-content">
            <span 
              class="node-name" 
              @mouseenter="handleNodeHover(data, true)"
              @mouseleave="handleNodeHover(data, false)"
            >{{ formatNodeName(node.label, data) }}</span>
          </div>
        </template>
        </el-tree>
      </el-scrollbar>
      
      <el-empty v-if="!displayData || displayData.length === 0" description="暂无模型数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { Menu, Close } from '@element-plus/icons-vue'

const props = defineProps({
  service: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['selectItem', 'close'])

const treeRef = ref(null)
const activeTab = ref('storeys')
const treeData = ref([])

const tabs = [
  { key: 'storeys', label: 'Storeys' }
]

const setActiveTab = (key) => {
  activeTab.value = key
}

const treeProps = {
  children: 'children',
  label: 'name'
}

// 根据当前选项卡过滤显示数据
const displayData = computed(() => {
  if (!treeData.value || treeData.value.length === 0) {
    console.log('[displayData] 树数据为空')
    return []
  }
  
  console.log(`[displayData] 当前选项卡: ${activeTab.value}, 原始数据节点数: ${treeData.value.length}`)
  
  let filteredData = []
  
  if (activeTab.value === 'storeys') {
    // 显示 Storeys 选项卡的数据（Building -> Storeys -> IFC类型 -> 类型分类 -> 实例）
    filteredData = filterStoreysData(treeData.value)
    console.log(`[displayData] Storeys 过滤后节点数: ${filteredData.length}`)
    
    // 调试：输出过滤后的结构
    if (filteredData.length > 0) {
      function logFilteredStructure(nodes, level = 0) {
        for (const node of nodes) {
          const indent = '  '.repeat(level)
          console.log(`${indent}- ${node.name} (${node.type}) [expressID: ${node.expressID}] [children: ${node.children?.length || 0}]`)
          if (node.children && node.children.length > 0 && level < 4) {
            // 输出前4层（楼层 -> IFC类型 -> 类型分类 -> 实例）
            logFilteredStructure(node.children, level + 1)
          }
        }
      }
      
      console.log('========== 过滤后的 Storeys 层级 ==========')
      logFilteredStructure(filteredData)
      console.log('==========================================')
    }
  } else if (activeTab.value === 'objects') {
    // 显示 Objects 选项卡的数据（所有实体）
    filteredData = filterObjectsData(treeData.value)
    console.log(`[displayData] Objects 过滤后节点数: ${filteredData.length}`)
  } else if (activeTab.value === 'classes') {
    // 显示 Classes 选项卡的数据（按类型分组）
    filteredData = filterClassesData(treeData.value)
    console.log(`[displayData] Classes 过滤后节点数: ${filteredData.length}`)
  } else {
    // Models 选项卡 - 显示完整结构
    filteredData = treeData.value.length > 0 ? treeData.value : []
    console.log(`[displayData] Models 节点数: ${filteredData.length}`)
  }
  
  return filteredData
})

// 过滤 Storeys 数据（Building -> Storeys -> IFC类型 -> 类型分类 -> 实例）
function filterStoreysData(data) {
  const result = []
  
  // 递归查找所有 Building 节点，保持完整的层级结构
  function findBuildings(items) {
    const buildings = []
    
    for (const item of items) {
      if (item.type === 'IFCBuilding') {
        // 找到 Building 节点，直接返回（包含所有子节点）
        buildings.push(item)
      } else if (item.children && item.children.length > 0) {
        // 递归查找子节点中的 Building
        const childBuildings = findBuildings(item.children)
        buildings.push(...childBuildings)
      }
    }
    
    return buildings
  }
  
  // 递归查找所有 Storey 节点，保持完整的层级结构
  function findStoreys(items) {
    const storeys = []
    
    for (const item of items) {
      if (item.type === 'IFCBuildingStorey') {
        // 找到 Storey 节点，直接返回（包含所有子节点：IFC类型 -> 类型分类 -> 实例）
        storeys.push(item)
      } else if (item.children && item.children.length > 0) {
        // 递归查找子节点中的 Storey
        const childStoreys = findStoreys(item.children)
        storeys.push(...childStoreys)
      }
    }
    
    return storeys
  }
  
  // 优先查找 Building 节点（保持完整层级结构）
  const buildings = findBuildings(data)
  if (buildings.length > 0) {
    // 返回 Building 列表，每个 Building 包含 Storeys，Storeys 包含 IFC 类型等
    return buildings
  }
  
  // 如果没有 Building，尝试直接查找 Storeys（保持完整层级结构）
  const storeys = findStoreys(data)
  if (storeys.length > 0) {
    // 如果有 Storeys，创建一个虚拟的 Building 节点包装它们
    // 但保持 Storeys 的完整层级结构（包含 IFC 类型 -> 类型分类 -> 实例）
    return [{
      expressID: 0,
      name: 'Building',
      type: 'IFCBuilding',
      children: storeys  // Storeys 已经包含了完整的层级结构
    }]
  }
  
  // 如果都没有，返回原始数据（可能是其他结构）
  return data
}

// 过滤 Objects 数据（所有实体）
function filterObjectsData(data) {
  const result = []
  
  function collectObjects(items) {
    for (const item of items) {
      // 跳过分类节点（IFCCategory）
      if (item.type === 'IFCCategory' && item.expressID === 0) {
        // 如果是分类节点，递归其子节点
        if (item.children && item.children.length > 0) {
          collectObjects(item.children)
        }
      } else {
        // 如果是实体节点（有 expressID），添加到结果
        if (item.expressID && item.expressID > 0 && item.type && item.type !== 'IFCCategory') {
          result.push(item)
        }
        
        // 递归子节点
        if (item.children && item.children.length > 0) {
          collectObjects(item.children)
        }
      }
    }
  }
  
  collectObjects(data)
  
  // 如果结果为空，尝试查找"实体 (Entities)"分类
  if (result.length === 0) {
    function findEntities(items) {
      for (const item of items) {
        if (item.name === '实体 (Entities)' || item.name?.includes('实体')) {
          if (item.children && item.children.length > 0) {
            return item.children
          }
        }
        if (item.children && item.children.length > 0) {
          const found = findEntities(item.children)
          if (found.length > 0) {
            return found
          }
        }
      }
      return []
    }
    
    const entities = findEntities(data)
    if (entities.length > 0) {
      collectObjects(entities)
    }
  }
  
  return result
}

// 过滤 Classes 数据（按类型分组）
function filterClassesData(data) {
  const result = []
  
  // 按类型分组所有实体
  const typeGroups = new Map()
  
  function collectByType(items) {
    for (const item of items) {
      // 跳过分类节点
      if (item.type === 'IFCCategory' && item.expressID === 0) {
        // 递归子节点
        if (item.children && item.children.length > 0) {
          collectByType(item.children)
        }
      } else if (item.type && item.type !== 'IFCCategory' && item.expressID && item.expressID > 0) {
        // 按类型分组
        const typeName = item.type
        if (!typeGroups.has(typeName)) {
          typeGroups.set(typeName, [])
        }
        typeGroups.get(typeName).push(item)
      }
      
      // 递归子节点
      if (item.children && item.children.length > 0) {
        collectByType(item.children)
      }
    }
  }
  
  collectByType(data)
  
  // 如果找不到分组，尝试查找"类型 (Types)"分类
  if (typeGroups.size === 0) {
    function findTypes(items) {
      for (const item of items) {
        if (item.name === '类型 (Types)' || item.name?.includes('类型')) {
          if (item.children && item.children.length > 0) {
            return item.children
          }
        }
        if (item.children && item.children.length > 0) {
          const found = findTypes(item.children)
          if (found.length > 0) {
            return found
          }
        }
      }
      return []
    }
    
    const types = findTypes(data)
    if (types.length > 0) {
      collectByType(types)
    }
  }
  
  // 转换为树形结构
  for (const [typeName, items] of typeGroups) {
    if (items.length === 1) {
      // 只有一个元素，直接显示
      result.push(items[0])
    } else {
      // 多个元素，按类型分组
      result.push({
        expressID: 0,
        name: typeName,
        type: 'IFCCategory',
        children: items
      })
    }
  }
  
  return result
}

// 格式化节点名称（添加高度信息等）
function formatNodeName(label, data) {
  // label 可能是字符串或对象，需要处理
  let nodeName = ''
  
  if (typeof label === 'string') {
    nodeName = label
  } else if (label && typeof label === 'object' && label.value) {
    nodeName = label.value
  } else if (data && data.name) {
    nodeName = data.name
  } else {
    nodeName = String(label || '')
  }
  
  if (!nodeName) return ''
  
  // 如果是楼层（BuildingStorey），尝试提取高度信息
  if (data && data.type === 'IFCBuildingStorey') {
    // 从 name 或 properties 中提取高度
    const elevation = data.elevation || data.properties?.Elevation || data.properties?.elevation
    if (elevation !== undefined && elevation !== null) {
      return `${nodeName} ${elevation}`
    }
  }
  
  return nodeName
}

function handleNodeClick(data) {
  emit('selectItem', data)
  if (props.service && data.expressID && data.expressID > 0) {
    props.service.highlight([data.expressID])
  }
}

// 递归收集所有有效的 expressID（排除分类节点）
function collectExpressIDs(nodes) {
  const ids = []
  
  function traverse(items) {
    for (const item of items) {
      // 跳过分类节点
      if (item.type !== 'IFCCategory' && item.expressID && item.expressID > 0) {
        ids.push(item.expressID)
      }
      
      // 递归子节点
      if (item.children && Array.isArray(item.children) && item.children.length > 0) {
        traverse(item.children)
      }
    }
  }
  
  traverse(nodes)
  return ids
}

// 递归收集节点的所有子节点的 expressID
function collectNodeExpressIDs(node) {
  const ids = []
  
  function traverse(item) {
    // 跳过分类节点，只收集有效的 IFC 对象
    if (item.type !== 'IFCCategory' && item.expressID && item.expressID > 0) {
      ids.push(item.expressID)
    }
    
    // 递归子节点
    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
      for (const child of item.children) {
        traverse(child)
      }
    }
  }
  
  traverse(node)
  return ids
}

async function handleCheck(data, checked) {
  // 处理复选框选择 - 显示/隐藏对应的3D组件
  // checked 参数格式: { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
  // data: 当前操作的节点
  if (!props.service || !treeRef.value || !data) return
  
  try {
    const checkedKeys = checked.checkedKeys || []
    const currentNodeExpressID = data.expressID
    
    // 检查当前节点是否被选中（需要考虑 expressID=0 的分类节点）
    const isCurrentNodeChecked = checkedKeys.includes(currentNodeExpressID)
    
    // 收集当前节点及其所有子节点的 expressID（包括递归收集）
    const nodeExpressIDs = collectNodeExpressIDs(data)
    
    console.log(`[handleCheck] 节点 ${data.name} (${data.type}) ${isCurrentNodeChecked ? '勾选' : '取消勾选'}, expressID: ${currentNodeExpressID}, 影响 ${nodeExpressIDs.length} 个组件`)
    
    // 如果当前节点是分类节点（IFCCategory，expressID=0），直接处理其所有子节点
    if (data.type === 'IFCCategory' && currentNodeExpressID === 0) {
      // 分类节点本身没有对应的3D组件，只处理其子节点
      if (nodeExpressIDs.length > 0) {
        if (isCurrentNodeChecked) {
          // 勾选分类节点：显示所有子节点
          await props.service.setVisibility(nodeExpressIDs, true)
          console.log(`[handleCheck] 显示分类节点 "${data.name}" 下的 ${nodeExpressIDs.length} 个子节点`)
        } else {
          // 取消勾选分类节点：隐藏所有子节点
          await props.service.setVisibility(nodeExpressIDs, false)
          console.log(`[handleCheck] 隐藏分类节点 "${data.name}" 下的 ${nodeExpressIDs.length} 个子节点`)
        }
      }
      return // 分类节点处理完成
    }
    
    // 如果当前节点是有效的 IFC 对象（有 expressID）
    if (currentNodeExpressID && currentNodeExpressID > 0) {
      // 根据勾选状态显示或隐藏当前节点
      if (isCurrentNodeChecked) {
        // 勾选：显示当前节点对应的3D组件
        await props.service.setVisibility([currentNodeExpressID], true)
        console.log(`[handleCheck] 显示节点 ${currentNodeExpressID} (${data.name})`)
        
        // 同时显示所有子节点（确保子节点也显示）
        if (nodeExpressIDs.length > 1) {
          const childExpressIDs = nodeExpressIDs.filter(id => id !== currentNodeExpressID)
          if (childExpressIDs.length > 0) {
            await props.service.setVisibility(childExpressIDs, true)
            console.log(`[handleCheck] 同时显示 ${childExpressIDs.length} 个子节点`)
          }
        }
      } else {
        // 取消勾选：隐藏当前节点对应的3D组件
        await props.service.setVisibility([currentNodeExpressID], false)
        console.log(`[handleCheck] 隐藏节点 ${currentNodeExpressID} (${data.name})`)
        
        // 同时隐藏所有子节点（确保子节点也隐藏）
        if (nodeExpressIDs.length > 1) {
          const childExpressIDs = nodeExpressIDs.filter(id => id !== currentNodeExpressID)
          if (childExpressIDs.length > 0) {
            await props.service.setVisibility(childExpressIDs, false)
            console.log(`[handleCheck] 同时隐藏 ${childExpressIDs.length} 个子节点`)
          }
        }
      }
    }
    
    // 特殊情况：如果所有节点都被取消选中，隐藏所有
    if (checkedKeys.length === 0) {
      console.log('[handleCheck] 所有复选框取消，隐藏所有元素')
      props.service.hideAll()
    }
  } catch (err) {
    console.error('[handleCheck] 处理复选框选择失败:', err)
    console.error('[handleCheck] 错误堆栈:', err?.stack)
  }
}

// 处理节点悬停高亮
function handleNodeHover(data, isEntering) {
  if (!props.service || !data) return
  
  // 只对有效的 IFC 对象进行高亮（有 expressID 且大于 0）
  if (data.expressID && data.expressID > 0 && data.type !== 'IFCCategory') {
    if (isEntering) {
      // 鼠标进入时高亮
      props.service.highlight([data.expressID])
    } else {
      // 鼠标离开时取消高亮
      props.service.highlight([])
    }
  }
}

// 递归设置所有节点为选中状态
function setAllNodesChecked(node) {
  if (!node) return
  
  if (node.expressID && node.expressID > 0) {
    treeRef.value?.setChecked(node.expressID, true, false)
  }
  
  if (node.children && Array.isArray(node.children)) {
    for (const child of node.children) {
      setAllNodesChecked(child)
    }
  }
}

async function loadTreeData() {
  if (!props.service) {
    console.warn('Service 未就绪')
    treeData.value = []
    return
  }
  
  try {
    console.log('开始加载模型树数据...')
    treeData.value = []
    
    // 等待模型完全加载，最多等待 5 秒
    let retries = 0
    const maxRetries = 50
    let items = []
    
    while (retries < maxRetries) {
      try {
        // getModelItems 现在是异步方法
        items = await props.service.getModelItems()
        if (items && items.length > 0) {
          console.log(`成功获取 ${items.length} 个树节点`)
          break
        }
      } catch (err) {
        console.warn(`尝试获取模型数据失败 (${retries + 1}/${maxRetries}):`, err)
      }
      
      if (items.length === 0) {
        await new Promise(resolve => setTimeout(resolve, 100))
        retries++
      } else {
        break
      }
    }
    
    if (items.length === 0) {
      console.warn('未获取到模型数据，尝试最后一次...')
      await new Promise(resolve => setTimeout(resolve, 500))
      try {
        items = await props.service.getModelItems()
      } catch (err) {
        console.error('最后一次尝试失败:', err)
      }
    }
    
    if (items && items.length > 0) {
      // 处理数据，添加高度信息等
      treeData.value = processTreeData(items)
      
      // 调试：输出层级结构
      function logTreeStructure(nodes, level = 0) {
        for (const node of nodes) {
          const indent = '  '.repeat(level)
          if (node.children && node.children.length > 0) {
            logTreeStructure(node.children, level + 1)
          }
        }
      }

      logTreeStructure(treeData.value)
      
      // 等待 DOM 更新后，设置所有节点为选中状态
      await new Promise(resolve => setTimeout(resolve, 100))
      
            // 递归设置所有节点为选中状态
            if (treeRef.value && treeData.value.length > 0) {
              for (const item of treeData.value) {
                setAllNodesChecked(item)
              }
              
              // 默认选中时，显示所有元素
              if (props.service) {
                const allExpressIDs = collectExpressIDs(treeData.value)
                if (allExpressIDs.length > 0) {
                  await props.service.setVisibility(allExpressIDs, true)
                }
              }
            }
    } else {
      console.warn('模型树数据为空')
      treeData.value = []
    }
  } catch (err) {
    console.error('加载模型树失败:', err)
    treeData.value = []
  }
}

// 处理树数据，添加高度信息等
function processTreeData(items) {
  return items.map(item => {
    const processed = { ...item }
    
    // 如果是 BuildingStorey，尝试获取高度信息
    if (item.type === 'IFCBuildingStorey') {
      // 从 properties 或其他地方提取高度
      if (item.properties) {
        processed.elevation = item.properties.Elevation || item.properties.elevation
      }
    }
    
    // 递归处理子节点
    if (item.children && item.children.length > 0) {
      processed.children = processTreeData(item.children)
    }
    
    return processed
  })
}

function clearTreeData() {
  treeData.value = []
}

defineExpose({
  loadTreeData,
  clearTreeData
})
</script>

<style scoped>
.explorer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1a1d24;
  color: #e6e9ef;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2d34;
  background: #252830;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  font-size: 18px;
  color: #9ca3af;
}

.header-title {
  font-size: 14px;
  font-weight: 500;
  color: #e6e9ef;
}

.header-close {
  font-size: 16px;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
}

.header-close:hover {
  color: #e6e9ef;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid #2a2d34;
  background: #252830;
}

.tab-item {
  flex: 1;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.tab-item:hover {
  color: #e6e9ef;
  background: #2a2d34;
}

.tab-item.active {
  color: #a855f7;
  border-bottom-color: #a855f7;
  background: #1a1d24;
  font-weight: 500;
}

.tree-container {
  flex: 1;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.tree-scrollbar {
  flex: 1;
  height: 100%;
  
  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
  }
  
  :deep(.el-scrollbar__bar) {
    opacity: 0.6;
  }
}

.tree-node-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.node-name {
  font-size: 13px;
  color: #e6e9ef;
}

/* Element Plus Tree 样式覆盖 */
:deep(.el-tree) {
  background: transparent;
  color: #e6e9ef;
}

:deep(.el-tree-node) {
  background: transparent;
}

:deep(.el-tree-node__content) {
  height: 28px;
  background: transparent;
  border-radius: 4px;
  margin-bottom: 2px;
}

:deep(.el-tree-node__content:hover) {
  background: #2a2d34;
}

:deep(.el-tree-node__expand-icon) {
  color: #9ca3af;
  font-size: 14px;
}

:deep(.el-checkbox) {
  margin-right: 8px;
}

:deep(.el-checkbox__inner) {
  background-color: #2a2d34;
  border-color: #4b5563;
  width: 16px;
  height: 16px;
}

:deep(.el-checkbox__inner:hover) {
  border-color: #a855f7;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #a855f7;
  border-color: #a855f7;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: #a855f7;
  border-color: #a855f7;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #2a2d34;
}

/* 滚动条样式 */
.tree-container::-webkit-scrollbar {
  width: 8px;
}

.tree-container::-webkit-scrollbar-track {
  background: #1a1d24;
}

.tree-container::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

.tree-container::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}
</style>
